{% load django_vite %}
<!doctype html>
<html lang="en">
  <head>
    {% vite_hmr_client %}
    {% vite_asset 'src/main.js' %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" type="image/x-icon" href="{{base_path}}/static/assets/images/favicon.ico"/>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{{base_path}}/static/assets/lib/handsontable/handsontable.full.css?v{{pgmanage_short_version}}">
    <link rel="stylesheet" href="{{base_path}}/static/assets/lib/fa/css/all.css?v{{pgmanage_short_version}}">

    <link id="ss_theme" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{base_path}}/static/assets/lib/Passtrength/css/passtrength.css">

    <link rel="stylesheet" href="{{base_path}}/static/assets/css/font-poppins.css?{{pgmanage_short_version}}">
    <link rel="stylesheet" href="{{base_path}}/static/assets/css/font-ubuntu-mono.css?{{pgmanage_short_version}}">
    <title>PgManage</title>
  </head>
  <body>

  <!-- IF CHROME - Security countermeasures -->
  <form style="display:none;" autocomplete="off">
    <input type="text" name="prevent_autofill" id="prevent_autofill" value="" />
    <input type="password" name="password_fake" id="password_fake" value="" />
  </form>
  <!-- .IF CHROME -->


  <div id="extension-modal-wrap">
  </div>

  <div id="pgcron-modal-wrap">
  </div>

  <div id="app" class="omnidb__main omnidb__explain--default" style="min-height: 100vh;">
  </div>


    <div id="div_loading" class="div_loading" style='z-index: 100005; display: block;'>
      <div class="div_loading_cover"></div>
      <div class="div_loading_content">
        <div class="spinner-border text-primary" style="width: 4rem; height: 4rem;" role="status">
          <span class="sr-only ">Loading...</span>
        </div>
        <div>
          <button id="bt_cancel_ajax" style='display: none; margin-top: 10px;' class='btn btn-light' onclick="cancelAjax()">Cancel</button>
        </div>
      </div>
    </div>

    <!-- Modal About -->
    <div class="modal fade" id="modal_about" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header align-items-center">
            <h2 class="modal-title font-weight-bold">About</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body">
            <div class="row mb-3">
              <div class="col-5">
                <p class="font-weight-semibold">Version:</p>
              </div>
              <div class="col-7">{{ pgmanage_version }}</div>
            </div>

            <div class="row mb-3">
              <div class="col-5 d-flex align-items-center">
                <p class="font-weight-semibold mb-0">Supported databases:</p>
              </div>

              <div class="col-7 modal-about__db d-flex justify-content-between align-items-center">
                <img src="{{base_path}}/static/assets/images/postgresql_large.png" title="PostgreSQL"/>
                <img src="{{base_path}}/static/assets/images/oracle_large.png" title="Oracle"/>
                <img src="{{base_path}}/static/assets/images/mysql_large.png" title="MySQL"/>
                <img src="{{base_path}}/static/assets/images/sqlite_large.png" title="SQLite"/>
                <img src="{{base_path}}/static/assets/images/mariadb_large.png" title="MariaDB"/>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-5">
                <p class="font-weight-semibold">Primary Supporter:</p>
              </div>
              <div class="col-7">
                <a target="_blank" class="font-weight-bold" href="https://www.commandprompt.com/">
                  Command Prompt Inc
                  <!-- <img src="{{url_folder}}/static/OmniDB_app/images/supporters/command_prompt_inc.png" title="CommandPrompt Inc."/> -->
                </a>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-5">
                <p class="font-weight-semibold">Website:</p>
              </div>
              <div class="col-7">
                <a class="font-weight-bold" target="_blank" href="https://github.com/commandprompt/pgmanage">PgManage</a>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Modal Users -->
    <div class="modal fade" id="modal_users" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: max-content;">
          <div class="modal-header align-items-center">
            <h2 class="modal-title font-weight-bold">User management</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="div_user_list" style="width: 100%; overflow: hidden;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Plugins -->
    <!-- <div class="modal fade" id="modal_plugins" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
          <div class="modal-header align-items-center">
            <h2 class="modal-title font-weight-bold">Manage plugins</h2>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span>
            </button>
          </div>
          <div class="modal-body">
            <div class="custom-file mb-3">
              <input type="file" class="custom-file-input" id="plugin_file_selector" onchange="upload(this)" required>
              <label class="custom-file-label" for="plugin_file_selector">Select plugin package to be installed...</label>
            </div>

            <div id="plugin_grid" style="width: 100%; height: 300px; overflow: hidden;"></div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- Modal Generic Message -->
    <div class="modal fade" id="modal_message" tabindex="-1" role="dialog" aria-hidden="true">
      <div id="modal_message_dialog" class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header align-items-center">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div id="modal_message_content" class="modal-body" style='white-space: pre-line; word-break: break-word;'>
          </div>
          <div class="modal-footer">
            <button id="modal_message_yes" type="button" class="btn btn-primary" data-bs-dismiss="modal">Yes</button>
            <button id="modal_message_ok" type="button" class="btn btn-success" data-bs-dismiss="modal">Ok</button>
            <button id="modal_message_no" type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
            <button id="modal_message_cancel" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>

    {% vite_asset 'src/main.js' %}
    <script src="{{base_path}}/static/assets/lib/omnis_ui_assistant/omnis-control.js?v{{pgmanage_short_version}}"></script>

    <script type="text/javascript">
  	//Global variables
    var master_key = '{{master_key}}'
  	var v_user_id = {{ user_id }};
    var v_user_key = '{{ user_key }}';
    var user_name = '{{ user_name }}';
    var v_session_key = v_user_key;
    var v_user_login = user_name;
    var v_version = '{{ pgmanage_version }}';
    var short_version = '{{ pgmanage_short_version }}';
    var app_base_path = '{{ base_path }}'
  	var gv_desktopMode = ('{{ desktop_mode }}' === 'True');
    var v_omnis = createOmnis();
    var v_explain_control = {context: 'default'};

    var ht;
    var network;
    var v_canEditContent;
    var v_editContentObject;
    var v_super_user = {{ super_user|lower }};
    var v_csrf_cookie_name = '{{ csrf_cookie_name }}';
    </script>
    <script type="text/javascript" src="{{base_path}}/static/assets/lib/Passtrength/lib/jquery.passtrength.min.js" defer></script>
  </body>
</html>
